<template>
  <div class="select content">
    <div class="wrap">
      <ul class="clearfix">
        <li>
          <div class="logo">
            <img src="../../static/img/logo.png" alt="" @click="path()"/>
          </div>
        </li>
        <li>
          <div class="ipt">
            <input type="text" name="" id="key" placeholder="洗衣液" />
            <span class="iconfont icon-zhaoxiang"></span>
          </div>
        </li>
        <li>
          <div class="btn">
            <span class="iconfont icon-sousuo-copy"></span>
          </div>
        </li>
        <li>
          <div class="shopping_cart">
            <shopping_cart_slot></shopping_cart_slot>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import shopping_cart_slot from "./shopping-cart-slot";
export default {
  components: { shopping_cart_slot },
  mounted() {},
  methods:{
    path(){
      this.$router.push("/")
    }
  }
};
</script>
<style scoped>
.content {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.ipt {
  position: relative;
  margin-top: 30px;
}
.ipt > input {
  position: relative;
  padding: 2px 44px 2px 17px;
  width: 423px;
  height: 24px;
  border: 2px solid #f10215;
  line-height: 26px;
  font-size: 12px;
}
.ipt .icon-zhaoxiang {
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 14px;
  color: #9f9f9f;
}
.ipt .icon-zhaoxiang:hover {
  cursor: pointer;
  color: #e1251b;
}
li {
  float: left;
}
li:nth-child(2) {
  margin-left: 170px;
}
li:nth-child(4) {
  margin-left: 100px;
}
.logo{
  cursor: pointer;
}
.btn {
  border-radius: 0;
  margin-top: 30px;
  width: 58px;
  height: 32px;
  line-height: 32px;
  border: none;
  background-color: #e1251b;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  font-size: 20px !important;
}
.btn:hover {
  background-color: #c81623;
  cursor: pointer;
}
.btn .iconfont {
  font-size: 20px;
}
.shopping_cart {
  margin-top: 30px;
}
</style>
